<template>
  <!-- 弹窗 -->
  <el-dialog
    :title="dialogTitle"
    v-model="visible"
    :width="dialogWidth"
    @close="handleClose"
  >
    <!-- 表单 -->
    <el-form
      :model="formData"
      ref="formRef"
      :rules="formRules"
      label-width="80px"
    >
      <!-- 遍历表单字段 -->
      <template v-for="field in formFields">
        <el-form-item
          :label="field.label"
          :prop="field.prop"
          v-if="field.type === 'input'"
        >
          <!-- 输入框 -->
          <el-input
            v-model="formData[field.prop]"
            :type="field.inputType || 'text'"
          ></el-input>
        </el-form-item>
        <!-- 选择框 -->
        <el-form-item
          :label="field.label"
          :prop="field.prop"
          v-if="field.type === 'select'"
        >
          <!-- 选择框 -->
          <el-select
            v-model="formData[field.prop]"
            :placeholder="field.placeholder"
          >
            <!-- 遍历选项 -->
            <el-option
              v-for="option in field.options"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 树形选择框 -->
        <el-form-item
          :label="field.label"
          :prop="field.prop"
          v-if="field.type === 'tree-select'"
        >
          <!-- 树形选择框 -->
          <el-tree-select
            v-model="formData[field.prop]"
            :data="field.options"
            :props="{ children: 'children', label: 'label' }"
            :multiple="field.multiple"
            node-key="value"
            default-expand-all
            :default-checked-keys="selectedMenuIds"
            @check-change="handleCheckChange"
          ></el-tree-select>
        </el-form-item>
      </template>
    </el-form>
    <!-- 按钮 -->
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { defineProps, ref, computed, watch } from "vue";
import { ElForm } from "element-plus";

// 定义字段类型
interface FormField {
  label: string; // 标签
  prop: string; // 属性
  type: string; // 类型
  inputType?: string; // 输入框类型
  placeholder?: string; // 占位符
  options?: Array<{ label: string; value: any }>; // 选项
  errorMessage?: string; // 错误信息
  treeProps?: any; // 树形选择框属性
  multiple?: boolean; // 是否多选
}

// 定义事件
const emits = defineEmits(["update:visible", "confirm"]);
// 定义属性
const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
  },
  dialogTitle: String,
  dialogWidth: String,
  formData: {
    type: Object,
    default: () => ({}),
  },
  formFields: Array as () => FormField[], // 使用类型断言
  formRules: Object,
  selectedMenuIds: Array, // 使用类型断言
  handleCheckChange: Function,
});

watch(
  () => props.selectedMenuIds,
  (newVal) => {
    console.log(newVal, "newVal");
  }
);
// 定义计算属性
const visible = computed({
  get() {
    return props.visible;
  },
  set(value) {
    emits("update:visible", value);
  },
});
// 定义计算属性
const formRules = computed(() => props.formRules);
const formRef = ref<InstanceType<typeof ElForm> | null>(null);

// 定义方法
function handleClose() {
  resetForm();
  emits("update:visible", false);
}
// 确认事件
function handleConfirm() {
  formRef.value?.validate((valid, fields) => {
    if (valid) {
      emits("confirm", props.formData); // 触发确认事件并传递表单数据
      handleClose();
    } else {
      console.log("Form validation failed");
      // 设置错误信息
    }
  });
}
// 重置表单
function resetForm() {
  if (formRef.value) {
    formRef.value.resetFields();
  }
}
</script>
